<script setup lang='ts'>
import { reactive, ref, toRaw, unref } from 'vue';
import { delColumn, getColumn } from '@/api/axios/platformAxios';
import { ElMessage, ElMessageBox } from 'element-plus';

const tableData = ref([])
// 获取栏目
function initColumn() {
    getColumn().then(res => {
        console.log(res);
        tableData.value = res.rows
    })
}
initColumn()

// 控制模态款显示和隐藏
const dialogVisible = ref(false)

interface Type {
    sort?: string;
    name?: string;
    enable?: string;
    id?: string
}
const form = ref<Type> ({
})


function addColumn() {
    dialogVisible.value = true
    form.value.name = ''
    form.value.sort = ''
}

function editColumn(data) {
    form.value = toRaw(data)
    dialogVisible.value = true
}

function handleSave(value){
    // 刷新列表
    ElMessage({
        showClose: true,
        message: '操作成功',
        type: 'success',
    })
    initColumn()
}

// 删除
const del = (data) => {
    ElMessageBox.confirm(
        '此操作将永久删除, 是否继续?',
        '提示',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(() => {

            console.log(data);
            delColumn(data.id).then(res => {
                console.log(res);
            })
            initColumn()
            ElMessage({
                type: 'success',
                message: '删除成功',
            })
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '已取消删除',
            })
        })
}
</script>

<template>
    <div style='margin: 20px 35px'>
        <el-button type="primary" @click='addColumn()'>添加</el-button>
    </div>
    <div>
        <el-table :data="tableData" style="width: 95%;margin: 0 auto" border='true' >
            <el-table-column fixed prop='sort' label="排序" width='180' align='center'/>
            <el-table-column prop="name" label="名称" align='center' />
            <el-table-column prop="createTime" label="更新时间" width='200' align='center'/>
            <el-table-column fixed="right" label="操作" width="300" align='center'>
                <template v-slot='scope'>
                    <el-button link type="primary" size="small" style='font-size: 13px' @click='editColumn(scope.row)'>编辑</el-button>
                    <el-button link type="primary" size="small" style='font-size: 13px' @click='del(scope.row)'>删除</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>

    <column-dialog v-model:visible='dialogVisible' :columnInfo='form' @handleSave="handleSave"></column-dialog>


</template>

<style lang='scss'>
.gap-4 {
    padding: 26px 25px;
    width: 100%;
    margin-left: 20px;
}
div.cell{
    height: 36px;
    font-size: 14px;
    line-height: 36px;
    padding: 9px 0 !important;
}
</style>
